<!--主页-->
<template>
  <div
       style="
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        border: 10px;
        min-height: 105vh;
        display: flex;
        background-color: wheat;
        ">
    <div style="position: fixed">
      <img src="/img/首页6.png" style="position: absolute;width: 1480px;z-index: 0">
      <img src="/img/zyc/7.png" style="position: absolute;top: 20px;left: 5px;width: 300px;">
      <img src="/img/zyc/8.png" style="position: absolute;top: 250px;left: 300px;width: 200px;">
      <img src="/img/zyc/9.png" style="position: absolute;top: 500px;left: 100px;width: 300px;">

      <el-menu
          style="position: absolute;height: 105vh;"
              background-color="#FEFEDF"
              text-color="grey"
              active-text-color="#00C9A7"
              default-active="2"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              unique-opened router
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="/user">
              <el-icon><House /></el-icon>
              <template #title>首页</template>
            </el-menu-item>

            <el-menu-item index="/certificate">
              <el-icon><EditPen /></el-icon>
              <template #title>考试页</template>
            </el-menu-item>


            <el-menu-item index="/plan">
              <el-icon><ChatSquare /></el-icon>
              <template #title>计划</template>
            </el-menu-item>


            <el-menu-item index="personalDetail">
              <el-icon><User /></el-icon>
              <template #title>用户</template>
            </el-menu-item>
          </el-menu>
      <el-radio-group v-model="isCollapse" class="el-radio-button"
                      style="
                          position: absolute;
                          height: 30px;
                          top: 80vh;
                          "
      >
        <el-radio-button  :value="true"><el-icon><CaretLeft /></el-icon></el-radio-button>
        <el-radio-button :value="false"><el-icon><CaretRight /></el-icon></el-radio-button>
      </el-radio-group>
    </div>
    <el-main style="padding: 0;min-height:90vh;overflow-y:auto;">
      <router-view/>
    </el-main>
  </div>

<!--  <div
      style="
        border: 10px;
        min-height: 100vh;
        display: flex;
        background-color: #42b983;
        "
  >
    <el-menu
        background-color="#FEFEDF"
        text-color="grey"
        active-text-color="#00C9A7"
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-menu-item index="0">
        <el-icon><User /></el-icon>
        <template #title>用户</template>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>科目</span>
        </template>
        <el-menu-item-group>
          <template #title><span>计算机类</span></template>
          <el-menu-item index="1-1">软考</el-menu-item>
          <el-menu-item index="1-2">计算机等级</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="英语类">
          <el-menu-item index="1-3">四六级</el-menu-item>
          <el-menu-item index="1-4">专八</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-5">
          <template #title><span>会计类</span></template>
          <el-menu-item index="1-5-1">中级会计证</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <template #title>待完善</template>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <template #title>Navigator Three</template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>Navigator Four</template>
      </el-menu-item>
    </el-menu>
    <el-radio-group v-model="isCollapse" class="el-radio-button" >
      <el-radio-button  :value="true"><el-icon><CaretLeft /></el-icon></el-radio-button>
      <el-radio-button :value="false"><el-icon><CaretRight /></el-icon></el-radio-button>
    </el-radio-group>
    <div class="d1"
        style="width: 300px;height: 300px;box-shadow:0px 0px 5px 1px black;border-radius: 300px;border: 50px;margin: 0 auto;margin-top: 200px;"
        text-color="#fff"
        background-color="#47817F"
    >
    </div>

  </div>-->
</template>

<script setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const b1 = ref();

const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
  .d1{
    transition: 2s;
  }
  .d1:hover{
    background: rgba(100,255,200,70%);
    border-radius: 50px;
    transform: scale(60%);
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    min-height: 400px;
  }

  .el-radio-button{--el-radio-button-checked-bg-color:#FEFEDF;
    --el-radio-button-checked-text-color:#42b983;
    --el-radio-button-checked-border-color:#FEFEDF;
    --el-radio-button-disabled-checked-fill:var(--el-border-color-extra-light)}
  .el-radio-button:hover{

  }

</style>

